<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lsj
  Date: 2023/1/3
  Time: 13:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>卖家图书管理</title>
    <style>
        table{
            border: 3px solid gray;
            border-collapse: collapse;
            text-align: center;
        }
        table td{
            border: 3px solid gray;

        }
       table .nr td{
           width: 150px;
           height: 150px;
       }
        .table1{
           position: absolute;
            left: 100px;
            top: 150px;
        }
        .table1 img{
            width: 100px;
            height: 100px;
        }

        .top{
           text-align: center;
        }

        .top .form01{
            position: absolute;
            top: 50px;
            left: 450px;
        }
        .form01 button{
            width: 48px;
            height: 40px;
            border: none;
            background: url(//img63.ddimg.cn/upload_img/00459/home/head_sprite.png) no-repeat 0 -346px;
            cursor: pointer;
            position: absolute;

        }
        .top .form02{
            position: absolute;
            top: 50px;
            left: 750px;
        }

        .form02 button{
            width: 48px;
            height: 40px;
            border: none;
            background: url(//img63.ddimg.cn/upload_img/00459/home/head_sprite.png) no-repeat 0 -346px;
            cursor: pointer;
            position: absolute;

        }
        .form01 input{
            width: 150px;
            height: 40px;
            border: 2px solid #ff2832;
            border-right: none rgb(255, 40, 50);
            padding: 9px 0 9px 10px;
            z-index: 2;
            color: #323232;
            font: 12px/18px 'Hiragino Sans GB',"simsun",Arial;
            outline: 0;
            background: none;
            font-size: 18px;
        }

        .form02 input{
            width: 150px;
            height: 40px;
            border: 2px solid #ff2832;
            border-right: none rgb(255, 40, 50);
            padding: 9px 0 9px 10px;
            z-index: 2;
            color: #323232;
            font: 12px/18px 'Hiragino Sans GB',"simsun",Arial;
            outline: 0;
            background: none;
            font-size: 18px;
        }
        .edit{
            width: 65px;
            height: 28px;
            line-height: 28px;
            background: deepskyblue;
            color: #fff;
            border: none;
            display: inline-block;
            border-radius: 3px;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
            font-width: bold;
            /*position: relative;*/
            /*top: 0px;*/
            /*right: 0px;*/

        }
        .yes{
            width: 65px;
            height: 28px;
            line-height: 28px;
            background: greenyellow;
            color: #fff;
            border: none;
            display: inline-block;
            border-radius: 3px;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
            font-width: bold;
            /*position: absolute;*/
            /*top: 89px;*/
            /*right: 105px;*/
        }
        .delete{
            width: 65px;
            height: 28px;
            line-height: 28px;
            background: #ff2832;
            color: #fff;
            border: none;
            display: inline-block;
            border-radius: 3px;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
            font-width: bold;
            /*position: relative;*/
            /*top: 0px;*/
            /*right: 0px;*/
        }
        .add{
            width: 65px;
            height: 28px;
            line-height: 28px;
            background: deepskyblue;
            color: #fff;
            border: none;
            display: inline-block;
            border-radius: 3px;
            text-align: center;
            font-family: 'Microsoft Yahei';
            font-size: 14px;
            margin-right: 10px;
            cursor: pointer;
            position: absolute;
            top: 110px;
            right: 40px;
            font-width: bold;
        }
        tr .caozuo{
            width: 200px;
        }
        .edit svg{
            width: 18px;
            height: 18px;
            position: relative;
            top: 4px;
            right: 3px;
        }
        .delete svg{
            width: 18px;
            height: 18px;
            position: relative;
            top: 4px;
            right: 3px;
        }
        .add svg{
            width: 18px;
            height: 18px;
            position: relative;
            top: 3px;
            right: 3px;
        }
        .yes svg{
            width: 18px;
            height: 18px;
            position: relative;
            top: 3px;
            right: 3px;
        }
        .nr .priceTd input{
            border: none;
            width: 30px;
            height: 30px;
            font-size: 13px;
            color: #ff2832
        }





    </style>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://at.alicdn.com/t/c/font_3346089_gy9mmssokv7.js"></script>
<body>
    <div class="top">
        <form action="kind" method="post" class="form01">
            <span>类型</span>
            <input type="text" name="kind" value="${param.kind}">
            <button type="submit"></button>
        </form>

        <form action="findBookName" method="post" class="form02">
            <span>书籍名称</span>
            <input type="text" name="bookName" value="${param.bookName}">
            <button type="submit"></button>
        </form>
    </div>

    <button class="add"><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zengjia"></use>
    </svg>新增图书
    </button>
    <div class="table1">
    <table>
        <thead>
        <tr>
            <td>
                图片
            </td>
            <td>
                图书名字
            </td>
            <td>
                类型
            </td>
            <td>
                价格
            </td>
            <td>
                作者
            </td>
            <td>
                出版时间
            </td>
            <td>
                出版社
            </td>
            <td class="caozuo">
                操作
            </td>
        </tr>
        </thead>

        <c:forEach items="${sellers}" var="s" varStatus="v">
            <form action="update" method="post" id="form${v.index}">
        <tr class="nr" id="${v.index}">

            <td>
                <img src="${pageContext.request.contextPath}${s.bookPicture}">
            </td>

            <td style="color: #c30">
                    ${s.bookName}
            </td>

            <td style="color: #1a66b3">
                    ${s.kind}
            </td>

            <td style="color: #ff2832" class="priceTd" >
                    <input  type="text" value="${s.bookId}" id="zhi" style="display: none" name="bookId">
                    <input type="text" readonly="readonly" value="${s.price}" name="price" id="Price${v.index}" onchange="change(this)">￥
            </td>

            <td style="color: #1a66b3">
                    ${s.author}
            </td>

            <td style="color: #787878">
                    ${s.pubDate}
            </td>

            <td style="color: #1a66b3">
                    ${s.publisher}
            </td>
            <td>

                <button class="edit" onclick="Edit(this)" id="edit${v.index}" name="edit" type="button">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bianji"></use>
                    </svg><span>编辑</span>
                </button>

                <button class="yes"  style="display: none" onclick="confirm(this)" id="yes${v.index}" type="submit">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengque"></use>
                    </svg><span>确认</span>
                </button>


                <button class="delete">
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shanchu"></use>
                    </svg><span>下架</span>
                </button>
            </td>
        </tr>
            </form>
        </c:forEach>
    </table>
    </div>

<script>
    function Edit(id){
        var Id = $(id).attr("id");
        var yesid = "yes"+Id.substring(4,Id.length);
        var priceid= "Price"+Id.substring(4,Id.length);
        var edit1 = document.getElementById(Id);
        var yes = document.getElementById(yesid);
        var price = document.getElementById(priceid);
        price.readOnly = false;
        price.style.border = '1px solid #666';
        edit1.style.display = 'none';
        yes.style.display = 'inline-block';
        alert("您现在可以修改价格了");

    }

    function confirm(id){
        var Id = $(id).attr("id");
        var editid = "edit"+Id.substring(4,Id.length);
        var priceid= "Price"+Id.substring(4,Id.length);
        var edit1 = document.getElementById(editid);
        var yes = document.getElementById(Id);
        var price = document.getElementById(priceid);
        price.readOnly = true;
        price.style.border = 'none';
        edit1.style.display = 'inline-block';
        yes.style.display = 'none';

    }







</script>

</body>
</html>
